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III- 


- Desenho de Sistemas 




Interactivos 


III.4 - 


Concepgao e Desenho de 




Ecras 


HCI 


Cap. 5 (Pag. 211), Alan Dix 



Melhor e Pior ? 



ub ""'■" 




V.3 - Concepcao e Desenho de Ecras 



Resumo Aula Anterior 



• Modelo Conceptual (Cont.) 

- Cenarios de Actividades 

- Beneficios do Modelo Conceptual 

• Modelo Mental vs Conceptual 

• Tipos de Modelos Conceptuais 

• Exemplos 

• Modelo conceptual e o esqueleto da 
concepgao do sistenna interactivo 

• Conceber o que o sistema e 
e Nao como se apresenta 
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Sumario 



• Desenho Visual 

• Cor 

• Texto 

• Escrita de Texto 
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Desenho de Ecras 



• Dols aspectos a ter em conta: 

-Como dividir a tarefa pelos varios ecras 

• Deslocagao entre ecras ou no mesmo ecra? 

• Quantidade de interacgao por ecra? 

-Como desenhar cada um dos ecras 

• Espago em branco: equilibrio entre 
informagao/interacsao e clareza 

• Agrupar itens: cores, caixa, molduras 
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Dividir Tarefa pelos Ecras 



• Usar Analise de tarefas como ponto partida 

• Dividir a tarefa em subtarefas 

• Associar a cada subtarefa um ecra 

- Apenas como ponto de partida, depois ajustar 

• Problema: Muitos ecras demasiado simples 

• Algumas tarefas requerem multiplos ecras 
abertos simultaneamente 
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Desenho de cada Ecra 



• Captar a atengao do utilizador p/ pontes 
importantes para a realizagao da tarefa 

- Ex. Cor, animagoes (cuidado), agrupamentos, etc. 

• Boa organizagao do ecra ajuda 

- Agrupamentos, proximidade de itens 

• Compromisso entre ecra muito cheio e ecra 
com muitos espagos em branco 
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Desenho Visual 



• Agrupamento de itens 

• Ordenagao de itens 

• Decoragao - fontes, caixas, etc. 

• Aiiniiamento de itens 

• Espago em branco entre itens 
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Agrupamento e Estrutura 



Logicamente juntos ^ Fisicamente juntos 



Billing details 

Name 
Address: ... 
Credit card no 




Delivery details: 

Name 
Address: ... 
Delivery time 


Order details 

item 

size 10 screws 


(boxes ) 


quantity cost/item cost 

7 3.71 25.97 
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Ordenagao e Decoragao 



• Ordenagao de Grupos e Itens 

-Perceber qual a ordem natural 

-A ordem no ecra deve reflectir isso 

• Decoragao 

-Caixas e linhas para separar 
-Tipo de fonte, cor do texto e/ou do 

fundo 
-Mas nao muitas! 



abcdeffhuklm 
nopqrsk^awxyz 
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Alinhamento - Texto 



Lemos da esquerda para a direita 

^ Alinhar texto a esquerda 



Legivel 



Willy Wonka and the Chocolate Factory 

^ Winston Churchill - A Biography 

Wizard of Oz 

Xena - Warrior Princess 



Willy Wonka and th 


; Chocolate Factory 


Winston Churchill - 


A Biography 


Wizard of Oz 




Xena - Warrior Princess 



Aceitavel para 
efeitos especiais, 
mas dificil de ler 
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Alinhamento - Nomes 



Procuramos por apelido 
- Duas colunas 
-Apelido primeiro 



Gregory 


AbFwd 


Russell 


Beale 


Alan 


Dix 


Janet 


Finlay 



Alan Dix -^^ 
Janet Finlay 
Gregory Abowd 
Russell Beale 



egory 



Abowd, Gregory 
Beale, Russel 
Dix , Alan 
Finlay, Janet 
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Alinhamento - Numeros 



Inteiros - Direita 

Reals - pela virgula 

Evitar zeros a esquerda (00016 > 00116 ?) 

Separar numeros longos em grupos de 3 di'gitos 

(1 763 863,76) 

Usar separadores normalizados (ex. 4/4/04 ou 04:04:04) 
Datas (problema nalguns c asosl 



627.865 


1.005763 


382.583 


2502.56 


432.935 


2.0175 


652.87 


56.34 



Eie Kit WW FavaiKs ro 



BBB 



esVll)fiIST\JPM-04-0S\=l*s- 



gj iiia l-iipresait«Sa.[pt I 

HWaMntrcdugSsjjpt 

i]«Ja»-lre*!e-Taref35-l.cpt 

®"iJ*l-lnafe?-Tarefas-II.ppt 

S!HiJa5factwe*ljmai03-r.ppt 

l]«Ja6-F3dBre!Hunianos-lI.ppt 

® li^T-ModekHMentals + NK»*to5Cc(KfptufK-l.ppt 

il^iJaa-MijJdosMeniie+WxhtosaiEtptuie-njjpl: 
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Alinhamento - Multiplas Colunas 



• Problema: 

-Fosso grande entre colunas 
perceber correspondencia 



Dificil 



sherbet 


75 


toffee 


120 


chocolate 


35 


fruit gums 


27 


coconut dreams 


85 
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Alinhamento - Multiplas Colunas 


Solugoes 

Usar guias 

Realgar linhas 

Alinhar a direita 
(compromisso) 




sherbert 

toffee ■ — - - 

chocolate — - — - - - - - 

fruit gums 

coconut dreams - 


75 
120 
35 
27 
86 


sherbert 75 1| 


1 II 


chocolate 


35 1 


1 


iU 


coconut dreams 


ab 






sherbert 

toffee 

chocolate 

fruit gums 

coconut dreams 


75 
120 
35 
27 
85 
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Espagos em Branco 




Separar - paragrafos, secgoes, blocos 



Estruturar 




Realgar 

(usado nas revistas e jornais) 
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Exempio: Micro-ondas 






• Agrupamento 




Descongelar^ 

Tipo de comida- — ^^^^ 
Tempo 


H — ■ o ■ • 1 




P^^^mJ 
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Exempio: Micro-on 


das 






• Agrupamento 

• Ordenagao 








1) Tipo de Cozedura 

2) Temperatura 




ii^^^fey 1 




3) Tempo 








4) Inicio/Fim 
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Exempio: Micro-ondas 



• Agrupamento 

• Ordenagao 

• Decoragao 



Cores diferentes 
fungoes diferentes 



Linhas em torno de 
botoes relacionados 
(aumentar/diminuir temperatura) 
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Exempio: Micro-ondas 



• Agrupamento 

• Ordenagao 

• Decoragao 

• Alinhamento 



Texto centrado 
nos botoes 
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Exempio: Micro-ondas 






• Agrupamento 




• Ordenagao 






• Decoragao 






• Alinhamento 






• Espagos em branco 

/ 






Espagos para separar— "" 


^^^^jjp^Hl^l 




grupos de botoes 
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Original 



HB^BB9 
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Graduate Students Research ideas. 1 have a 



Previous Years 



Administration Ethj 





Graduate Students Research Ideas 1 1 



Courses offered CPSC 481 Foundations a 

this year CPSC 581 Human como 
CPSC 601.13 comoute 

Previous Years CPSC 681 Research Mett 
CPSC 699 Research Wett 
CPSC 601.48 Special T 
CPSC 601.56 Advances 

SENG 609.05 Graphic 
SENG 609.06 special t 
Ego alert My (niry on u i 



Ad I 



Ethics Committee fo 



Eisr 







Saul Greenberg' 
Professor 



Res earch Ideas kb 



cpsciaii.4a .>-, 
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Cor 



• Codificagao 

• Princfpios e Conselhos 
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Cultura Ocidental 














Conceito 


Cor 


o/o 




Parar 


Vermelhio 


100 


Avangar 


Verde 


99 


Frio 


Azul 


96 


Quente 


Vermelhio 


95 


Perigo 


Vermelhio 


90 


Precaugao 


Amarelo 


81 


Seguranga 


Verde 


61 


Ligado 


Vermelhio 


50 


Desligado 


Azul 


32 










v.3 - Concepgao e Desenho de Ecras 



Modelo HSV da Cor 




• Hue - Cor base 

• Saturation - Intensidade da cor. Mede a 
pureza da cor. 

- Alta -> cor pura; Baixa -> mistura com cinzento 

• Value - Brilho da cor. 
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Contraste I 




Effective 



Not 
Effective 



• Aumentar o contraste 
-Escurecer cores escuras 
-Clarear cores claras 
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Contraste II 



Orange 




Purple 



• Usar cores complementares 

- Ex. amarelo - azul 

• Evitar cores laranja c/ adjacentes 

- Ex. Vermelho 



v.3 - Concepcao e Desenho de Ecras 



Contraste III 




Effective 

Not 
Effective 



• Deficiencias (daltonismo e miopia porex.) 

- Dlficil distinguir entre cores proximas no espectro 

- Dlficil distinguir verde e vermelho (cones) 
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Cor Tern Problemas 


• Cores no ecra variam muito 


entre dispositivos jjjjjj^ 


-A placa grafica pode nao ser capaz '^W^ 


de representar a cor e substitui-a ,jj^ 


• Web safe ajuda (as vezes) j^^HE 


-Os mecanismos analogicos do ecra 


(calibragao - temperatura de cor) 


determinam cores diferentes 
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Cor Java (L & F) 

• Esquema semantico de seis cores 

• Aspecto limpo e consistente 

• Repousante (principalmente cinza) 

I Q Java Look and Feel JQ 



I — User Name: Chris Ryan L wma^j 



cm 


Ctrl-K 


Cm 


Ctrl-C 


Paste 


Ct:1-V 



Java Look and Feel 





SHI Tab 2 


L| Close 




— 


nn-iP 1 




1 


' — k/" ' 


_\ Close 


(1,432.271 
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Principios e Conselhos 


(1/3) 

optimizar 


• Desenhar prinneiro sem cor e 


desenlio do ecra 




- Adiclonar cor quando adicionar valor 


• Usar cor para 




- Atrair o olhar do utillzador 




- Destacar organizagao 




- Indicar estado ou estabelecer relagoes 


• Usar a cor apropriadannente 




- Usar a cor com outro Indicador 


secundario 


(daltonicos) 
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Principios e Conselhos (2/3) 



• Usar cor de modo e com significado 
consistente 

- Cria um Look & Feel comum a toda a aplicagao 

• Limitar a codificagao a oito cores distintas 
distribuidas pelo espectro visivel 

- quatro ou menos cores sac preferiveis 

• Seguir a regra do contraste 

- Usar texto escuro sobre fundo claro 

• Garante boa legibilidade, Reduz as reflexoes, Melhora 
contornos dos caracteres 
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Principios e Conselhos (3/3) 



• Somos atraidos por alteragoes de cor 

- Usar isso para mostrar alteragoes de estado 

• A "cor de um objecto" e influenciada pelo 
fundo 

- Escolham as cores num contexto e nao 
isoladamente 

• Utilizar as cores de acordo com as 
convengoes 

- Vermelho - parar; Verde - avangar; etc. 
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Texto 



• Tipos 

• Legibilidade 

• Tamanho 

• Cor 

• Espagamento 

• Estilo 

• Disposigao 
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Tipos de Texto 


Serif 




Sans Serif 




optima 


Fenice Bold 


Roman 
Obliqued 
True italic 


answ 
answ 
answ 


answ 
answ 
answ 


M- 


Weight and character distortion 


n obliqued type 
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Legibilidade do Texto 



• Usar Cor e Contraste 

• Para pessoas com deficiencias e 
cidadaos seniores 

-Cores Claras em fundo escuro funcionam 
melhor 

• Eficaz 

• Nao tao Eficaz 
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Cor do Texto 



• Alto contraste dificil de alcangar com outra 
combinagao para alem de preto e branco 

• Cores diferentes podem ser importantes 
por razoes esteticas mas e preferivel 
relega-las para titulos e cabegaihos de 
secgoes por exemplo. 

Eficaz 
Nao tao eficaz 
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Tamanho de Texto 



• Ideal sera pelo menos 12 pontos 

• Nao se esquegam da resolugao dos 
ecras (dpis)! 

• Nao Especificar Tamanho de Texto 
em pixels (px) 

• Isto e texto de 32 pontos 

• Isto e texto de 14 pontos 

Este te.to tem 12 pontos 
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Espagamento 



• Deve ser pelo menos 30% da 
altura do tipo 

• Espagamento que funciona 
menos bem: 

Muitas pessoas com problemas 
visuals (e nao so) tenn 
prpblenias em ler texto em 
rinnas demasiado juntas 
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Tipo de Texto 



• Evitem tipOS aceeMaianteitee »tiuu^ ^ae ioa nteii«* 



• Apenas para enfase 

• Usem tipos padrao normal ou italico 



Tipo condessado poupa espa;o nas i nenos 
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Estilo de Texto 


las 


• MIstura de malusculas e minuscu 


melhor do que 




-SO MAIUSCULAS 




-ou so minusculas 




• Evitem italico (menos legivel) 
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Recomendagoes 



• Usar 2 ou 3 fontes no maximo 

• Sem Serifa em ecras 

• Com Serifa em papel 

• Cuidado com o contraste 

• Texto na vertical dificil de ler 



lHU.i|MI.».IHU 

Normal 



Eg. 
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Escrita de Texto 



Mensagens 



• Pedidos de informagao 



• Instrugoes 
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Mensagens (1/4) 


• Devem ser breves e concisas: 


-0 processamento do editor de texto 


conduziu a 23 paginas impressas 


-Impressas 23 paginas 


• Desenhar com o nfvel de detaihe de 


acordo com os conhecimentos e 


experiencia do utilizador: 


-Erro no campo N° do Vestido 


-Erro: o N° do Vestido deve estar entre 4 


e 16 
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Mensagens (2/4) 



• Usar mensagens afirmativas: 

-Nao e possivel sair sem antes guardar o 

ficheiro 
-Guardar o ficheiro antes de sair 

• Mensagens devem ser construtivas e 
nao crfticas: 

-Nome de ficlieiro nnau/ilegal/invalido 
-NO maximo de caracteres do nome do 
ficheiro: 8 
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Mensagens (3/4) 



• Mensagens devem ser especfficas e 
construtivas: 

-Erro sintactico n° 1542 
-Parentesis esquerdo na linha 210 nao 
tern parentesis direito 

• Mensagens devem mostrar que o 
utilizador tem o controlo (controlo 
externo): 

-Entre comando 

-Pronto para receber comando 
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Mensagens (4/4) 



• Quando a mensagem implica uma 
pre-acgao ou estado as palavras da 
mensagem devem ser consistentes 
com essa acgao: 
-Trem de aterragem esta recolhido 
-Abra o trem de aterragem 
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Pedidos de informagao 



• Os mesmos principios devem ser usados 
nos pedidos de informagao: 

-Dialogo afirmativo, 

-Construtivo, 

- Consistente, 

- Especifico, 
-Claro,... 
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Erros Tipicos - Desenho de Ecras 



• Posigao arbitraria de componentes 

• Dimensoes arbitrarias dos componentes 

• Tamanhos e layouts arbitrarios das janelas 

• Inconsistencia nos varios ecras 

• Inconsistencia com o dispositive fisico 

- Ex. Janelas tipo Windows num telemovel 3G 

- Resolugao do ecra 
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Resumo (1/2) 



• Garantir que o desenho e simples e esta 
logicamente organizado 

• Evitar encher o ecra com informagao 
irrelevante 

• Sempre que apropriado apresentar a 
informagao graficamente em vez de 
numeros 

• Alinhar numeros e mostrar claramente as 
unidades 

• Nao usar so MAIUSCULAS e limitar o 
numero de fontes 
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Resumo (2/2) 



• Agrupar elementos relacionados 

- usar caixas, cor, espago 

• Usar cor conservadora e consistentemente 

• Usar uma cor neutra para o fundo 

• Usar caracteres escuros sobre fundo claro 

• Minimizar o numero de cores, mas que 
sejam distintas 

• Usar informagao adicional para alem da 
cor (daltonicos) 
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Referencias Adicionais 



• Tipografia na web 

- http://commmunity.linux.com/howtos/Font- 
HOWTO/typography.shtml 

- http://deslctoppub.about.com/cs/fonts/tp/ 
sansbodyfonts.htm 

- http://deslctoppub.about.com/cs/finetypography/ 
ht/body_font.htm 

- http://www.will-harris.com/typoscrn.htm 

- http://www.pemberley.com/janeinfo/latinl.html 

- http://www.microsoft.com/typography/ 

• Cor 

- http://www.webwhirlers.com/colors/ 

v.3 - Concepcao e Desenho de Ecras 



Proxima Aula 



• O que sao prototipos? 

• Porque prototipar? 

• Tipos de prototipos 

-Cenarlos de Interacgao 

- Storyboards 

- PBFs e PAFs 

- Wizard of Oz 

• Como se testa um PBF? Vfdeo 

• Ler HCI, Cap. 5, Alan Dix 
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